<script>
import {mapState, mapMutations} from "vuex";

export default {
  name: "TagsView",
  computed: {
    ...mapState({tagList: state => state.tabList})
  },
  inject:['reload'],
  data() {
    return {
      contextMenuVisible: false,
      showIcon: false,
      menuLeft: '',
      menuTop: '',
      tagIndex: 0,
      tag: {},
      tagScroll: "0px",
      swiperScrollWidth: 0,
      swiperScrollContentWidth: 0
    }
  },
  methods: {
    ...mapMutations(['closeTab']),
    handleClick(item) {
      this.$router.push(item.path);
    },
    arrowLeft() {
      let tabBoxWidth = this.$refs.tagBox.clientWidth; //盒子宽度
      let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft);
      if (offsetLeft > tabBoxWidth) {
        this.tagScroll = offsetLeft + tabBoxWidth + "px";
      } else {
        this.tagScroll = "0px";
      }
    },
    arrowRight() {
      let tagBoxWidth = this.$refs.tagBox.clientWidth;
      let scrollWidth = this.$refs.scrollWrapper.scrollWidth;
      let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft);
      let diffWidth = scrollWidth - tagBoxWidth;
      if (diffWidth - offsetLeft > tagBoxWidth) {
        this.tagScroll = -(offsetLeft + tagBoxWidth) + "px";
      } else {
        this.tagScroll = -diffWidth + "px";
      }
    },
    handleClose(item, index) {
      this.closeTab(item);
      const length = this.tagList.length;
      if (this.$route.name != item.menuName) {
        return;
      }
      ;
      if (index === length) {
        this.$router.push(this.tagList[index - 1].path);
      } else {
        this.$router.push(this.tagList[index].path);
      }
    },
    handleClickContextMenu(event) {
      const e = event || Window.event;
      const target = e.target;
      this.menuLeft = e.layerX + 180 + "px";
      this.menuTop = e.layerY + 70 + "px";
      console.log(target);
      this.tagIndex = Number(target.getAttribute('data-index'));
      this.contextMenuVisible = true;
      this.tag = this.tagList[this.tagIndex];
    },
    refresh() {
      this.reload();
    },
    closeTag() {
      this.handleClose(this.tagList[this.tagIndex], this.tagIndex);
    },
    closeOtherTag() {
      this.tagList.slice(1, this.tagIndex).forEach((item, index) => {
        this.closeTab(item);
      })
      this.tagList.slice(2).forEach((item, index) => {
        this.closeTab(item);
      })
      this.$router.push(this.tagList[1].path);
    },
    closeLeft() {
      this.tagList.slice(1, this.tagIndex).forEach((item, index) => {
        this.closeTab(item);
        if (this.$route.name != item.menuName) {
          return;
        }
        this.$router.push(this.tagList[1].path);
      })
    },
    closeRight() {
      this.tagList.slice(this.tagIndex + 1).forEach((item, index) => {
        this.closeTab(item);
        if (this.$route.name != item.menuName) {
          return;
        }
        this.$router.push(this.tagList[this.tagIndex].path);
      })
    },
    closeAll() {
      for (let i = this.tagList.length - 1; i > 0; i--) {
        this.closeTab(this.tagList[i])
      }
      this.$router.push("/home");
    },
    checkIconStatus() {
      if (!this.$refs.scrollWrapper) return;
      let containerSize = this.$refs.tagBox.clientWidth;
      let navSize = this.$refs.scrollWrapper.scrollWidth;
      if (containerSize > navSize || containerSize == navSize) {
        this.showIcon = false;
      } else {
        this.showIcon = true;
      }
    }
  },
  mounted() {
   this.$erd.listenTo(this.$refs.scrollWrapper,()=>{
     this.$nextTick(() => {
     this.checkIconStatus();
     })
   });
  },
  created() {
    window.addEventListener('click', (e) => {
      const target = e.target;
      if (target.nodeName !== 'SPAN') {
        this.contextMenuVisible = false;
      }
    })
  }
}
</script>

<template>
  <div>
    <div class="tags" ref="tagList">
      <div class="arrow-icon" @click="arrowLeft" v-show="showIcon">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="tag-style" ref="tagBox">
        <div class="scrollWrapper" ref="scrollWrapper" id="nav" :style="{marginLeft:tagScroll}">
          <el-tag
              v-for="(item,index) in tagList"
              :key="item.path"
              :closable="item.menuName!=='主页'"
              :data-index="index"
              :effect="$route.name===item.menuName ? 'dark':'plain'"
              :hit=true
              :disable-transitions=true
              size="medium"
              @click="handleClick(item)"
              @close="handleClose(item,index)"
              @contextmenu.native.prevent="handleClickContextMenu($event)">
            {{ item.menuName }}
          </el-tag>
        </div>
      </div>
      <div class="arrow-icon" @click="arrowRight" v-show="showIcon">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <ul class="right-menu" :style="{left:menuLeft,top:menuTop}" v-show="contextMenuVisible">
      <li @click="refresh"><i class="el-icon-refresh-right"></i>刷新页面</li>
      <li @click="closeTag" v-if="tagIndex!==0"><i class="el-icon-close"></i>关闭当前</li>
      <li @click="closeLeft" v-if="tagIndex>1"><i class="el-icon-back"></i>关闭左侧</li>
      <li @click="closeRight" v-if="tagIndex !==tagList.length-1"><i class="el-icon-right"></i>关闭右侧</li>
      <li @click="closeOtherTag"><i class="el-icon-circle-close"></i>关闭其他</li>
      <li @click="closeAll"><i class="el-icon-circle-close"></i>全部关闭</li>
    </ul>
  </div>
</template>

<style scoped>
.tags {
  background-color: #fcfcfc;
  font-size: 15px;
  line-height: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding: 5px 18px;
  align-items: center;
  display: flex;

  .tag-style {
    display: flex;
    align-items: center;
    overflow: hidden;
    pointer-events: all;
    cursor: pointer;
    position: relative;

    .scrollWrapper {
      display: flex;
      align-items: center;
      overflow-x: auto;
      transition: all 500ms linear;
    }

    .scrollWrapper::-webkit-scrollbar {
      height: 0;
    }

    .el-tag {
      align-items: center;
      margin-right: 5px;
      cursor: pointer;
    }
  }

  .arrow-icon {
    font-size: 20px;
    pointer-events: all;
    cursor: pointer;
  }
}

.right-menu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
}

.right-menu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}

.right-menu li:hover {
  background-color: #f1f1f1;
}

.right-menu li i {
  margin-right: 3px;
}


</style>
